<template>
  <div class="movie-card">
    <NuxtLink :to="`/column/${movie.columnValue || 'movie'}/detail/${movie.movieBasicsId}`">
      <div class="relative overflow-hidden rounded-t-lg">
        <!-- 海报图 -->
        <img
          :src="movie.poster || '/default-poster.jpg'"
          :alt="movie.title"
          loading="lazy"
          class="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
        />

        <!-- 评分 -->
        <span v-if="movie.movieRate?.rate > 0" class="rate">
          {{ movie.movieRate.rate.toFixed(1) }}
        </span>

        <!-- 付费标签 -->
        <span v-if="movie.isPay === 1" class="pay-tag">
          付费
        </span>

        <!-- 更新标记 -->
        <span v-if="movie.remark && movie.remark.includes('更新')" class="update-tag">
          {{ movie.remark }}
        </span>
      </div>

      <!-- 影片信息 -->
      <div class="p-2">
        <h3 class="text-white text-sm font-medium truncate mb-1" :title="movie.title">
          {{ movie.title }}
        </h3>
        <!-- 演员信息或简介 -->
        <p class="text-gray-400 text-xs truncate">
          <template v-if="movie.casts && movie.casts.length > 0">
            <template v-for="(cast, index) in movie.casts.slice(0, 2)" :key="cast.castId">
              {{ cast.actor?.name || cast.name }}<template v-if="index < Math.min(movie.casts.length, 2) - 1">、</template>
            </template>
          </template>
          <template v-else>
            {{ movie.summary || movie.tags || movie.year || '-' }}
          </template>
        </p>
      </div>
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
interface MovieRate {
  rate?: number
  rateUserCount?: number
}

interface Actor {
  actorId?: number
  name?: string
  nameEn?: string
}

interface Cast {
  castId?: number
  actor?: Actor
  name?: string
}

interface Movie {
  movieBasicsId: number
  title: string
  titleEn?: string
  poster?: string
  columnValue?: string
  status?: string
  isPay?: number
  remark?: string
  summary?: string
  tags?: string
  movieRate?: MovieRate
  casts?: Cast[]
}

defineProps<{
  movie: Movie
}>()
</script>

<style scoped lang="scss">
.movie-card {
  background: #1a1b1e;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  }

  // 图片容器 - 设置固定宽高比
  .relative {
    aspect-ratio: 3/4;
    background: #2a2b2e;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  // 评分标签
  .rate {
    position: absolute;
    left: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    color: #ffd700;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
  }

  // 付费标签
  .pay-tag {
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(135deg, #ffd700, #ffb800);
    color: #000;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 0 0 0 8px;
  }

  // 更新标记
  .update-tag {
    position: absolute;
    left: 0;
    top: 8px;
    background: rgba(16, 185, 129, 0.9);
    color: white;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 0 4px 4px 0;
  }

  // 文字信息区域
  h3 {
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
  }

  p {
    font-size: 11px;
    line-height: 1.3;
    color: #9ca3af;
  }

  // 移动端适配
  @media (max-width: 640px) {
    .relative {
      aspect-ratio: 3/4;
    }

    h3 {
      font-size: 12px;
    }

    p {
      font-size: 10px;
    }
  }
}
</style>